<template>
    <div class="page coach-page instituttons-details">
        <div class="banner">
            <div class="banner-image" style="background-image: url('/images/training_detail_banner.jpg')">
                <span>青训机构</span>
                <p>YOUTH INSTITUTIONS</p>
            </div>
        </div>
        <div class="content">
            <div class="training-detail-crumb">
                <a class="back-btn" href="javascript:history.back()">返回</a>
                <a>{{mechanismData.name}}</a>
            </div>
            <!-- 富文本区域 -->
            <div class="details-content">
                <div class="training-content-header">
                    <span>{{mechanismData.name}}</span>
                </div>
                <div class="details-content-text">
                    <img v-if="mechanismData.homeImgs" :src="mechanismData.homeImgs|filtersImg"
                         style="margin:20px auto;display: block;width: 80%;"
                         alt="">
                    <div class="brief-introduction">
                        <div class="brief-title">{{mechanismData.name }}简介</div>
                        <div class="brief-detail" v-html="mechanismData.info"></div>
                        <div class="brief-address">
                            <p>地址：{{mechanismData.addressInfo }} </p>
                            <p>联系方式：{{mechanismData.infoPhone }}</p>
                        </div>
                    </div>
                    <div class="brief-introduction wheel-planting">
                        <div class="brief-title">训练设施</div>
                        <div class="wheel-content">
                            <swiper  v-if="mechanismData.trainingFacilities" :options="swiperOption">
                                <swiper-slide v-for="item in mechanismData.trainingFacilities.split(',')">
                                    <img width="150" height="150" :src="item|filtersImg" class="imgWidth">
                                </swiper-slide>
                                <div class="swiper-button-prev" slot="button-prev"></div>
                                <div class="swiper-button-next" slot="button-next"></div>
                            </swiper>
                        </div>
                    </div>
                    <div class="brief-introduction" v-if="mechanismData.trainingVideo">
                        <div class="brief-title">训练视频</div>
                        <div class="platform-video" style="margin-bottom:20px">
                            <video
                                    v-if="mechanismData.trainingVideo"
                                    style="width:500px; margin-right: 20px"
                                    :src="mechanismData.trainingVideo|filtersImg"
                                    controls>
                            </video>
                        </div>
                    </div>
                    <div class="brief-introduction">
                        <div class="brief-title">机构信息</div>
                        <div class="organization-content" v-html="mechanismData.message">
                            <!-- <p>在招队伍：12-18青训队伍</p>
                            <p>联系邮箱：13585889223@163.com</p>
                            <p>地址：广东省深圳市龙岗区大运体育中心207</p> -->
                        </div>
                    </div>
                    <div class="brief-introduction wheel-planting">
                        <div class="brief-title">机构课程</div>
                        <div class="wheel-content">
                            <swiper v-if="mechanismData.courses" :options="swiperOption">
                                <swiper-slide v-for="i in mechanismData.courses.split(',')">
                                    <img v-if="i!=''" width="150" height="150" :src="i|filtersImg" class="imgWidth">
                                    <!-- <p style="width:100%;text-align:center;">{{item.name}}</p> -->
                                </swiper-slide>
                                <div class="swiper-button-prev" slot="button-prev"></div>
                                <div class="swiper-button-next" slot="button-next"></div>
                            </swiper>
                        </div>
                    </div>
                    <div class="brief-introduction wheel-planting">
                        <div class="brief-title">教练团队</div>
                        <div class="wheel-content">
                            <swiper v-if="mechanismData.teams" :options="swiperOption">
                                <swiper-slide v-for="i in mechanismData.teams.split(',')">
                                    <img width="150" height="150" :src="i|filtersImg" class="imgWidth">
                                    <!-- <p style="width:100%;text-align:center;">{{item.name}}</p> -->
                                </swiper-slide>
                                <div class="swiper-button-prev" slot="button-prev"></div>
                                <div class="swiper-button-next" slot="button-next"></div>
                            </swiper>
                        </div>
                    </div>
                    <div class="brief-introduction wheel-planting">
                        <div class="brief-title">赛事荣誉</div>
                        <div class="wheel-content">
                            <swiper v-if="mechanismData.matchs" :options="swiperOption">
                                <swiper-slide v-for="i in mechanismData.matchs.split(',')">
                                    <img v-if="i!=''" width="150" height="150" :src="i|filtersImg" class="imgWidth">
                                    <!-- <p style="width:100%;text-align:center;">{{item.name}}</p> -->
                                </swiper-slide>
                                <div class="swiper-button-prev" slot="button-prev"></div>
                                <div class="swiper-button-next" slot="button-next"></div>
                            </swiper>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mechanismGet} from '../../api/api/web.js';
    import {baseImgPath, basefile} from '@/config/env.js';

    export default {
        data() {
            return {
                mechanismData: {
                    banner: '',
                    courses: "",
                    teams: "",
                    trainingFacilities: "",
                    matchs: "",
                },
                swiperOption: {
                    speed: 1000,
                    slidesPerView: 5,
                    spaceBetween: 80,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                },
            }
        },
        mounted() {
            this.getdata()
            //console.log(this.information)
        },
        methods: {
            getdata(){
                var that = this;
                mechanismGet({
                    id: this.$route.params.id
                }).then(res => {
                    that.mechanismData = res.data;
                    console.log(that.mechanismData);
                });
            },
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            }
        }
    }
</script>

<style scoped>
    @import url("css/D-coach-training.css");
</style>
